<template>
    <div class="page-container">
        <div class="list-container">
            <el-form :model="search" :inline="true" size="small">
                <el-form-item label="客户名称:" prop="nickname">
                    <el-input v-model="search.nickname" placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                    <el-input v-model="search.phone" placeholder="请输入手机号" type="number" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="filterSubmit">查询</el-button>
                    <el-button @click="filterReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row justify="space-between">
                <el-col :span="18">
                    <!-- <el-button type="primary" icon="ele-Plus" size="small" @click="showAddUser">备案客户</el-button> -->
                </el-col>
                <el-col :span="4">
                    <el-button size="small" icon="ele-Refresh" @click.stop.prevent="filterReset">加载列表</el-button>
                    <el-button size="small" icon="ele-Download" @click.stop.prevent="clickExport">导出</el-button>
                </el-col>
            </el-row>
            <el-table :data="list" style="width: 100%; margin-top: 20px;" size="small">
                <el-table-column prop="nickname" label="客户简称" width="150" />
                <el-table-column prop="name" label="联系人" width="150" />
                <el-table-column prop="phone" label="手机号" width="120" />
                <el-table-column prop="orderSn" label="订单号" />
                <el-table-column prop="orderAmount" label="订单金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.orderAmount }} ￥</span>
                    </template>
                </el-table-column>                            
                <el-table-column prop="saleMoney" label="分佣金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.saleMoney }} ￥</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amountMoney" label="收益金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.amountMoney }} ￥</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isExtract" label="首款状态" >
                    <template #default="scope">
                        <el-tag class="ml-2" :type="scope.row.paymentTime != null && scope.row.orderStatus == 3 && scope.row.status == 1 ?'success':'danger'">
                            {{ scope.row.paymentTime != null && scope.row.orderStatus == 3 && scope.row.status == 1 ?'已确认':'未确认' }}
                        </el-tag>
                    </template>
                </el-table-column> 
                <el-table-column prop="isExtract" label="是否可提现" >
                    <template #default="scope">
                        <el-tag class="ml-2" :type="scope.row.paymentTime != null && scope.row.orderStatus == 3 && scope.row.status == 1 ?'success':'danger'">
                            {{ scope.row.paymentTime != null && scope.row.orderStatus == 3 && scope.row.status == 1 ?'是':'否' }}
                        </el-tag>
                    </template>
                </el-table-column>    
                <el-table-column prop="amountMoney" label="可提现金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.status == 1?scope.row.amountMoney:0 }} ￥</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amountMoney" label="未可提现金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.status == 1?0:(scope.row.status == 2?0:(scope.row.paymentTime != null?scope.row.amountMoney:0)) }} ￥</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="提现状态" >
                    <template #default="scope">
                        <el-tag class="ml-2" :type="scope.row.status == -2 || scope.row.status == -1 ?'danger':(scope.row.status == 0?'warning':(scope.row.status == 1?'success':'info'))">
                            {{ filterList['saleOrderStatus'][scope.row.status].name }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="amountMoney" label="已提现金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.status == 2?scope.row.amountMoney:0 }} ￥</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amountMoney" label="未提现金额" >
                    <template #default="scope">
                        <span style="color: red; font-weight: bold;">{{ scope.row.status == 2?0:(scope.row.paymentTime != null ? scope.row.amountMoney : 0) }} ￥</span>
                    </template>
                </el-table-column>  
                <el-table-column prop="orderStatus" label="订单状态" >
                    <template #default="scope">
                        {{ filterList['orderStatus'][scope.row.orderStatus].name }}
                    </template>
                </el-table-column>                      
            </el-table>
        </div>
        <div class="page-block">
            <el-pagination v-model:currentPage="search.current" v-model:page-size="search.size"
                :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 备案弹窗 -->
        <el-dialog v-model="addModalState" title="客户备案" center>
            <el-radio-group v-model="addSevenOfUser.type" class="ml-4">
                <el-radio :label="1" size="large">普通客户</el-radio>
                <el-radio :label="2" size="large">企业客户</el-radio>
            </el-radio-group>
            <el-input v-if="addSevenOfUser.type == '1'" v-model="addSevenOfUser.searchKey" placeholder="请输入用户手机号" maxlength="11"
                @input="filterPhone" />
            <el-input v-else v-model="addSevenOfUser.searchKey" placeholder="请输入企业名称" />
            <span style="color: red; size: 18px;" v-if="s_telephone1 != ''">{{ s_telephone1 }}</span>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="addModalState = false">绑定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'SevenList',
    setup() {
        const state = reactive({
            list: [],
            filterList: {},
            search: {
                current: 1,
                size: 10,
                nickname: '',
                phone: '',
            },
            total: 0,
            addModalState: false,
            addSevenOfUser: {
                type: 1,
                searchKey: '',
            },
            s_telephone1: ''
        })
        // 初始化数据
        const getList = () => {
            api.sevenOrders(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        // 查询
        const filterSubmit = () => {
            getList()
        }
        // 重置
        const filterReset = () => {
            state.search = {
                current: 1,
                size: 10,
                nickname: '',
                phone: '',
            }
            getList()
        }
        // 显示备案弹窗
        const showAddUser = () => {
            state.addModalState = true
        }
        // 导出
        const clickExport = () => {

        }
        // 改变页大小
        const handleSizeChange = e => {
            state.search.size = e
            getList()
        }
        // 改变当前页
        const handleCurrentChange = e => {
            state.search.current = e
            getList()
        }
        // 过滤手机号
        const filterPhone = (phone) => {   
            if (/^[0-9]*$/.test(phone)) {
                if (!(/^1[34578]\d{9}$/.test(phone))) {  //手机号正则校验
                    if (phone === '') { //若手机号为空
                        state.s_telephone1 = "请输入手机号码";
                        return false;
                    } else { //手机号非空的报错信息
                        state.s_telephone1 = "手机号码格式错误";
                        return false;
                    }
                }else{
                    //手机号正确则无错误信息
                    state.s_telephone1 = "";
                    return true;
                }
            }else{
                state.addSevenOfUser.searchKey = phone.substring(0, phone.length - 1)
                //手机号正确则无错误信息
                state.s_telephone1 = "";
                return true;
            }       
             
        }
        // 获取过滤订单状态
        const getDictMap = () => {
            api.getDictByCodes(['orderSourceType', 'orderStatus', 'saleOrderStatus']).then(res => {
                state.filterList = res.data
            })
        }

        onMounted(() => {
            getList()
            getDictMap()
        })
        return {
            ...toRefs(state),
            getList,
            handleSizeChange,
            handleCurrentChange,
            filterSubmit,
            filterReset,
            showAddUser,
            clickExport,
            filterPhone,
            getDictMap,
        }
    }

}
</script>

<style lang="scss" scoped>
.list-container {
    background: var(--next-color-white);

    :deep(.el-table__header-wrapper .el-table__cell) {
        background: var(--el-color-primary-light-9);
        color: var(--next-bg-menuBar-light-1);
    }
}
</style>